<template>
    <img v-if="emptyHolder || urlRef" :src="urlRef" alt="picture" v-bind="$attrs" />
</template>

<script lang="ts" setup>
import { watch, ref } from 'vue';
import { getImage } from '@/api/api.upload';

const props = defineProps({
    imgSrc: {
        type: String,
    },
    emptyHolder: {
        type: Boolean,
        default: false,
    },
});

const thumbnail = require('@/assets/image/taylor-sondgeroth-ltsKOg_q_Gc-unsplash@2x.png');

const urlRef = ref(thumbnail);

watch(
    () => props.imgSrc,
    (val) => {
        if (val) {
            getImage(val).then((res) => {
                if (res.data.type !== 'application/json') {
                    const url = URL.createObjectURL(res.data);
                    urlRef.value = url;
                }
            });
        }
    },
    { immediate: true },
);
</script>
